import React from 'react'
import { Tabs, Cell, Image, Button } from 'react-vant'
import { useAppSelector } from '../../app/hooks'
import { NavLink } from 'react-router-dom'

const Tag = () => {
	const tags = useAppSelector(state => state.user.tags)
	return (
		<div>
			{
				tags.map(v => {
					return <Cell key={v.id} icon={<Image width={44} height={44} src={ v.image } round /> } title={v.title} value={<Button type="primary">已关注</Button>}></Cell>
				})
			}
		</div>
	)
}

const Index = () => {
	const isLogin = useAppSelector(state => state.user.isLogin);

	
	return (
		<div>
			<Tabs defaultActive={2}>
				<Tabs.TabPane key={1} title="全部标签">
					1
				</Tabs.TabPane>
				<Tabs.TabPane key={2} title="关注标签">
					{
						isLogin ? <Tag></Tag> : <NavLink to="/signin">未登录， 请登录！</NavLink>
					}
				</Tabs.TabPane>
			</Tabs>
		</div>
	)
}

export default Index